<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list demo</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div class="container">
    <!--
        1. list-unstyled表示生成一个无样式列表;
    -->
    <ul class="list-unstyled">
        <li>1 选项A</li>
        <li>2 选项B</li>
        <li>3 选项C</li>
    </ul>

    <!--
        1. list-group产生的列标的前面会有一个点.
    -->
    <ul class="list-group">
        <li>1 选项A</li>
        <li>2 选项B</li>
        <li>3 选项C</li>
    </ul>

    <!--
        1. list-group-item-danger, list-group-item-success这两种的列表样式差不多, 有颜色去呗.
    -->
    <ul class="list-group-item-danger">
        <li>1 选项A</li>
        <li>2 选项B</li>
        <li>3 选项C</li>
    </ul>
    <ul class="list-group-item-success">
        <li>1 选项A</li>
        <li>2 选项B</li>
        <li>3 选项C</li>
    </ul>

    <!--
        1. 这个列标比较特殊, 多个项都在一行显示了;
    -->
    <ul class="list-inline">
        <li>1 选项A</li>
        <li>2 选项B</li>
        <li>3 选项C</li>
    </ul>


</div>
</body>
</html>